<template>
	<div>
		<vee-observer v-slot="{invalid, validate}">
			<form @submit.prevent="validate().then(register)">
				<div class="form-group row">
					<label for="name" class="col-md-3 col-form-label text-md-right">用户名</label>

					<div class="col-md-7">
						<vee-validator name="用户名" rules="required|min:2|max:32" v-slot="{errors}">
							<input
								id="name"
								type="text"
								class="form-control"
								v-model="name"
								required
								autocomplete="name"
								autofocus
								:class="{'is-invalid': errors[0]}"
							>
							<span v-show="errors[0]" class="invalid-feedback" role="alert">
								<strong>{{errors[0]}}</strong>
							</span>
						</vee-validator>
					</div>
				</div>

				<div class="form-group row">
					<label for="email" class="col-md-3 col-form-label text-md-right">邮箱</label>

					<div class="col-md-7">
						<vee-validator name="邮箱" rules="required|email" v-slot="{errors}">
							<input
								id="email"
								type="email"
								class="form-control"
								v-model="email"
								required
								autocomplete="email"
								:class="{'is-invalid':errors[0]}"
							>

							<span v-show="errors[0]" class="invalid-feedback" role="alert">
								<strong>{{errors[0]}}</strong>
							</span>
						</vee-validator>
					</div>
				</div>

				<div class="form-group row">
					<label for="password" class="col-md-3 col-form-label text-md-right">密码</label>

					<div class="col-md-7">
						<vee-validator name="密码" rules="required|min:6|max:255" v-slot="{errors}" vid="confirmation">
							<input
								id="password"
								type="password"
								class="form-control"
								v-model="password"
								required
								autocomplete="new-password"
								:class="{'is-invalid':errors[0]}"
							>

							<span v-show="errors[0]" class="invalid-feedback" role="alert">
								<strong>{{errors[0]}}</strong>
							</span>
						</vee-validator>
					</div>
				</div>

				<div class="form-group row">
					<label for="password-confirm" class="col-md-3 col-form-label text-md-right">确认密码</label>

					<div class="col-md-7">
						<vee-validator name="确认密码" rules="required|confirmed:confirmation" v-slot="{errors}">
							<input
								id="password-confirm"
								type="password"
								class="form-control"
								v-model="password_confirmation"
								required
								autocomplete="new-password"
								:class="{'is-invalid':errors[0]}"
							>
							<span v-show="errors[0]" class="invalid-feedback" role="alert">
								<strong>{{errors[0]}}</strong>
							</span>
						</vee-validator>
					</div>
				</div>

				<div class="form-group row mb-0">
					<div class="col-md-7 offset-md-3">
						<button type="submit" class="btn btn-primary" :disabled="invalid">注册</button>
					</div>
				</div>
			</form>
		</vee-observer>
	</div>
</template>

<script>
export default {
	data() {
		return {
			name: "",
			email: "",
			password: "",
			password_confirmation: ""
		};
	},
	methods: {
		register() {
			let formData = {
				name: this.name,
				email: this.email,
				password: this.password
			};
			axios
				.post("/api/register", formData)
				.then(res => {
					console.log(res.data);
					this.$router.push({ name: "confirm" });
				})
				.catch(err => {
					console.log(err.response);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
</style>
